<template>
	<view class="message-box">
		<!-- S 顶部导航 -->
		<sol-navbar title="留言信箱">
			<template v-slot:right>
				<image class="message-box-naver_right-icon" src="/static/icon-message/icon_clear.png" mode="scaleToFill"
					@click="fnClearEvent('open')">
				</image>
			</template>
		</sol-navbar>
		<!-- E 顶部导航 -->

		<!-- S 列表项 -->
		<view class="message-box-item">
			<sol-avatar class="message-box-item_left" src="https://dummyimage.com/200x200" :gender="2" size="md">
			</sol-avatar>
			<view class="message-box-item_right">
				<view class="item_right-header">
					<text class="item_right-header_name">用户名称</text>
					<text>留言类型</text>
				</view>
				<view class="item_right-comtent" @click="fnReplyEvent('open', 1)">回复留言内容</view>
				<view class="item_right-reply">针对留言内容</view>
				<view class="item_right-time">时间</view>
			</view>
		</view>
		<view class="message-box-item">
			<sol-avatar class="message-box-item_left" src="https://dummyimage.com/200x200" :gender="2" size="md">
			</sol-avatar>
			<view class="message-box-item_right">
				<view class="item_right-header">
					<text class="item_right-header_name">用户名称</text>
					<text>留言类型</text>
				</view>
				<view class="item_right-comtent" @click="fnReplyEvent('open', 2)">
					有些傻话，不但是要背着人说，还得背着自己。让自己听见了也怪难为情的。譬如说，我爱你，我一辈子都爱你。回复留言内容</view>
				<view class="item_right-reply">针对留言内容</view>
				<view class="item_right-time">时间</view>
			</view>
		</view>
		<!-- E 列表项 -->

		<!-- S 清除留言 -->
		<sol-drawer v-model="clearOpen" primary-text="是的,确认" cancel-text="取消" @click="fnClearEvent">
			<template v-slot:default>
				<view class="clear">
					<text class="clear-title">确认清空吗？</text>
					<text class="clear-explain">清空后无法找回</text>
				</view>
			</template>
		</sol-drawer>
		<!-- E 清除留言 -->

		<!-- S 弹出留言者头像 -->
		<sol-drawer v-model="comment.open" primary-text="回复" confirm-text="举报TA" cancel-text="取消" @click="fnReplyEvent">
			<template v-slot:default>
				<view class="comment-item">
					<sol-avatar src="https://dummyimage.com/200x200" size="lg"></sol-avatar>
					<text class="comment-item_name">暮年</text>
				</view>
			</template>
		</sol-drawer>
		<!-- E 弹出留言者头像 -->

		<!-- S 弹出留言回复板 -->
		<sol-drawer v-model="comment.brand" :custom-slot="true" @click="fnReplyEvent">
			<template v-slot:default>
				<view class="comment-borad">
					<view class="comment-borad_header">
						<view class="comment-borad_header-close" @click="fnReplyEvent('close')">关闭</view>
						<view class="comment-borad_header-title">回复</view>
						<view class="comment-borad_header-send" @click="fnReplyEvent('send')">发送</view>
					</view>
					<textarea class="comment-borad_content" :maxlength="200" :show-confirm-bar="false" :placeholder="comment.placeholder"
						v-model="comment.content" />
				</view>
			</template>
		</sol-drawer>
		<!-- E 弹出留言回复板 -->

	</view>
</template>

<script>
	export default {
		name: "MessageBox",
		data() {
			return {
				// 回复弹出层
				comment: {
					// 弹出留言者头像
					open: false,
					// 弹出回复板
					borad: false,
					// 内容
					content: "",
					// 占位文字
					placeholder: "请输入回复信息 (200字内)"
				},
				// 清除弹出层
				clearOpen: false,
			};
		},
		computed: {},
		methods: {
			// 清除弹出层事件
			fnClearEvent(type = '', value = 0) {
				this.$log(this.$options.name, type, value);
				switch (type) {
					case 'open': // 打开
						this.clearOpen = true;
						break;
					case 'mask': // 遮罩
					case 'cancel': // 取消
						this.clearOpen = false;
						break;
					case 'primary': // 确认
						break;
				}
			},
			// 回复弹出层
			fnReplyEvent(type = '', value = 0) {
				this.$log(this.$options.name, type, value);
				switch (type) {
					case 'open': // 打开
						this.comment = {
							// 弹出留言者头像
							open: true,
							// 弹出回复板
							brand: false,
							// 内容
							content: "",
							// 占位文字
							placeholder: "回复暮年"
						}
						break;
					case 'mask': // 遮罩
					case 'cancel': // 取消
						this.comment.open = false;
						break;
					case 'close': // 关闭
						this.comment.brand = false;
						break;
					case 'primary': // 回复TA
						this.comment = {
							// 弹出留言者头像
							open: false,
							// 弹出回复板
							brand: true,
							// 内容
							content: "",
							// 占位文字
							placeholder: "回复暮年"
						}
						break;
					case 'confirm': // 举报TA
						uni.navigateTo({
							url: '/pages/other/report/report'
						})
						break;
					case 'send':
						this.$log(this.$options.name, this.comment.content);
						break;
				}
			},


		}
	}
</script>

<style lang="scss">
	.message-box {
		min-height: 100vh;
		background-color: $--color-background;

		// 顶部栏
		&-naver_right-icon {
			width: 48rpx;
			height: 44rpx;
			padding: 14rpx 28rpx 14rpx 24rpx;
			display: block;
			overflow: hidden;
		}

		&-item {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			padding: 28rpx;

			&_left {
				// width: 112rpx;
				// height: 112rpx;
			}

			&_right {
				width: 80%;
				flex-grow: 1;
				margin-left: 28rpx;
			}

			.item_right {
				&-header {
					font-size: 28rpx;
					font-weight: 400;
					color: #878787;
					letter-spacing: 4rpx;

					&_name {
						color: #BBBBBB;
						margin-right: 28rpx;
					}
				}

				&-comtent {
					font-size: 32rpx;
					font-weight: 400;
					color: #DDDDDD;
					letter-spacing: 4rpx;
					padding: 28rpx 0;
				}

				&-reply {
					background-color: #474e54;
					font-size: 28rpx;
					font-weight: 400;
					color: #878787;
					padding: 28rpx;
					border-radius: 14rpx;

				}

				&-time {
					font-size: 28rpx;
					font-weight: 400;
					color: #878787;
					margin-top: 28rpx;
				}
			}
		}

		// 清除说明
		.clear {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			&-title {
				font-size: 48rpx;
				font-weight: bold;
				color: #DDDDDD;
				letter-spacing: 8rpx;
				margin-bottom: 18rpx;
			}

			&-explain {
				font-size: 28rpx;
				font-weight: 400;
				color: #878787;
			}
		}

		// 弹出留言者头像
		.comment-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-bottom: 42rpx;

			&_name {
				margin-top: 28rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #DDDDDD;
			}
		}

		// 回复板
		.comment-borad {
			&_header {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				&-close {
					font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 4rpx;
					color: #878787;
					padding: 12rpx 12px 12rpx 0;
				}

				&-title {
					letter-spacing: 6rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #DDDDDD;
					flex-grow: 1;
					text-align: center;
				}

				&-send {
					border-radius: 50rpx;
					font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 4rpx;
					background-color: #607d8b;
					color: #DDDDDD;
					padding: 14rpx 28rpx;
				}
			}

			&_content {
				height: 250rpx;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 4rpx;
				color: #DDDDDD;
				border-radius: 24rpx;
				background-color: #576069;
				padding: 28rpx;
				width: 91%;
				margin: 24px auto 0;
			}
		}
	}
</style>
